<template>
  <div class="banner">
    <div class="ax-row">
      <span>参会指南</span>
    </div>
  </div>
  <div class="container">
    <div class="common_container">
      <ul class="filter-button-group">
        <li id="nav1">
          <el-button size="large" color="#63a0be" round plain
            >大会场馆</el-button
          >
        </li>
        <li id="nav2">
          <el-button size="large" color="#63a0be" round plain
            >大会交通</el-button
          >
        </li>
        <li id="nav3">
          <el-button size="large" color="#63a0be" round plain
            >酒店住宿</el-button
          >
        </li>
        <li id="nav4">
          <el-button size="large" color="#63a0be" round plain
            >大会签到</el-button
          >
        </li>
        <li id="nav5">
          <el-button size="large" color="#63a0be" round plain
            >联系我们</el-button
          >
        </li>
      </ul>
    </div>
    <div class="space"></div>
    <div id="hallPlan">
      <h1 style="font-size: xx-large; text-align: center; color: #14ccc9">
        大会场馆
      </h1>
      <br />
      <h1 style="font-size: large; text-align: center; color: #14ccc9">
        Hall Plan
      </h1>
      <el-button
        v-for="button in buttons"
        :key="button.text"
        :type="button.type"
        text
        >{{ button.text }}</el-button
      >
    </div>
    <div id="transport">
      <div class="transport_container">
        <div class="title">
          <h1>大会交通</h1>
          <span>Transport</span>
        </div>
        <div class="ax-shadow-cloud ax-row"></div>
      </div>
    </div>
    <div id="notice"></div>
    <div id="Sign_In"></div>
    <div id="contact"></div>
  </div>
</template>

<script>
export default {
  name: "Guide",
};
</script>
<script setup>
const buttons = [
  { type: "", text: "杭州洲际酒店" },
  { type: "", text: "会场平面图" },
];
</script>
<style lang="scss" scoped>
.banner {
  width: 100%;
  height: 696px;
  display: flex;
  justify-content: center;
  background-image: url("@/assets/guide_banner.jpg");
  background-repeat: no-repeat;
  background-size: 100% 696px;
  position: absolute;
  .ax-row {
    width: 1437px;
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 48px;
    font-weight: bold;
    color: aliceblue;
    span {
      display: block;
      margin-top: 40px;
    }
  }
}
.container {
  width: 100%;
  position: relative;
  z-index: 2;
  .common_container {
    width: 144rem;
    max-width: 80%;
    margin: 0 auto;
    position: absolute;
    top: 650px;
    background-color: white;
    left: 10%;
    text-align: center;
  }
  .space {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    position: absolute;
    top: 700px;
    background-color: white;
    left: 0%;
    text-align: center;
    height: 200px;
    z-index: -1;
  }
  #hallPlan {
    position: absolute;
    width: 100%;
    top: 900px;
    max-width: 100%;
  }
}

.filter-button-group {
  position: relative;
  text-align: center;
  display: flex;
  font-size: large;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  li {
    font-size: large;
    margin: 20px 6.5%;
  }
}

.buttongroup_hallPlan {
  text-align: center;
  display: flex;
  font-size: large;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  margin: auto;
}
</style>